import "./index.css";
import { todoData } from "./hooks/useData";
import { useEffect, useState } from "react";
import {type2Comp} from './config/config'


export default function ToDoList() {
    const [todoList, setTodoList] = useState([]);
    useEffect(() => {
        setTodoList(todoData);
    }, []);

    const toDoTask=(item)=>{
        console.log(item);
        const isComp=type2Comp[item.type]
        console.log(isComp);
        
        if(isComp){//跳转路由

        }else{
          console.error(`Unknown type: ${item.type}`);
        }
        
    }

    const listhtml=()=> todoList.map((item) => {
        return (
            <div className="list-one" key={item.id}>
              <div className="text">{item.info} <span>由{item.name}发起</span> </div>
              <div className="btn" onClick={()=>toDoTask(item)}>办理</div>
            </div>
          )
    })

  return (
    <div>
      <h4>下面是一个待办列表</h4>
      <div className="list-box">
       { listhtml()}
      </div>
    </div>
  );
}
